<template>
    <div class="app-container">
        <div class="pageTitle">
            <div class="pageTitleSub">
                <el-form ref="queryForm" :model="queryParams" label-width="100px" size="small">
                    <el-row :gutter="5">
                        <el-col :span="6">
                            <el-form-item label="车牌号" prop="Plate_no">
                                <el-input v-model="queryParams.Plate_no" placeholder="请输入车牌号" clearable />
                            </el-form-item>
                        </el-col>

<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="检测站点" prop="name">-->
<!--                                <crossing-select v-model="crossing_arr" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                        <el-col :span="6">
                            <el-form-item label="开始时间" prop="Pass_time1">
                                <el-date-picker
                                    v-model="queryParams.Pass_time1"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="截至时间" prop="Pass_time2">
                                <el-date-picker
                                    v-model="queryParams.Pass_time2"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="车辆轴数" prop="Axle_num">
                                <dict-select v-model="queryParams.Axle_num" dict="dict_axle_num" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="pageBtn">
                <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </div>
        </div>

        <page-main>
            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                      header-cell-class-name="table-header" style="width: 100%;" border :row-class-name="tableRowClassName">
                <el-table-column
                    prop="plate_no"
                    label="车牌号码"
                    align="center" width="120"
                    show-overflow-tooltip />
                <el-table-column
                    prop="name"
                    label="检测站点"
                    width="150"
                    show-overflow-tooltip />
                <el-table-column
                    prop="plate_color_name"
                    label="车牌颜色"
                    align="center" width="100" />
                <el-table-column
                    prop="axle_num"
                    label="车辆轴数"
                    align="center" width="100"
                    show-overflow-tooltip />
                <el-table-column
                    prop="lane_no"
                    label="车道"
                    width="100"
                    align="center"
                    show-overflow-tooltip />
                <el-table-column
                    prop="directionName"
                    label="方向"
                    align="center"
                    show-overflow-tooltip />
                <el-table-column
                    prop="pass_time"
                    label="过车时间"
                    width="160"
                    align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.pass_time.replace(/T/," ").substring(0,19) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="secondCheck_time"
                    label="作废时间"
                    width="160"
                    align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.secondCheck_time.replace(/T/," ").substring(0,19) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="limit_weight"
                    label="车辆限重(吨)"
                    align="right" width="110"
                    show-overflow-tooltip />
                <el-table-column
                    prop="vehicle_weight"
                    label="车辆重量(吨)"
                    align="right" width="110"
                    show-overflow-tooltip />
                <el-table-column
                    prop="over_weight"
                    label="超重(吨)"
                    align="right" width="90"
                    show-overflow-tooltip />
                <el-table-column
                    prop="over_rate"
                    label="超限率"
                    align="right" width="90"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.over_rate }}%
                    </template>
                </el-table-column>
                <el-table-column
                    prop="vehicle_len"
                    label="车长"
                    align="right" width="70" />
                <el-table-column
                    prop="vehicle_width"
                    label="车宽"
                    align="right" width="70" />
                <el-table-column
                    prop="vehicle_heigth"
                    align="right" width="70"
                    label="车高" />
                <el-table-column
                    prop=""
                    label="操作"
                    width="200"
                    fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" icon="el-icon-document" @click="handleViews(scope.$index)">查看详情</el-button>
                        <el-button type="text" size="small" icon="el-icon-document" @click="closeCase(scope.$index)">作废撤销</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="Pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="queryParams.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount"
                    @current-change="handleCurrentChange" />
            </div>
        </page-main>
        <ExamDetail
            ref="examDetail"
            :total="totalCount"
            :table-size="tableSize"
            :current-page="queryParams.CurrentPage"
            :init-detail-data="detailData"
            :indexs="index"
            step="qt"
            @handleViews="handleViews"
            @getList="handleCurrentChange" />
    </div>
</template>
<script>
// import {InquiryEvidenceAudit, InquiryResult, InquiryInvalided, Revocation} from '@/api/overrunPenaltyApi';
import moment from 'moment';
// import CrossingSelect from '@/modules/components/CrossingSelect';
// import DictSelect from '@/modules/components/DictSelect';
// import ExamDetail from '@/modules/components/examDetail';
import {mapGetters} from 'vuex';
export default {
    name: 'inquiry-invalided',
    components: {
        // CrossingSelect, DictSelect, ExamDetail
    },
    data() {
        return {
            plateColors: [],
            crossing_arr: [],
            queryParams: {
                Plate_no: '',
                Vehicle_weight: '',
                Vehicle_weight1: '',
                Over_rate: '',
                Over_rate1: '',
                Axle_num: '',
                Crossing_id: '',
                Pass_time1: '',
                Pass_time2: '',
                CurrentPage: 1
            },
            isLoading: false,
            tableData: [],
            totalCount: 0,
            detailData: {},
            index: 0,
            tableSize: 0
        };
    },
    created() {
    },
    mounted() {
        this.$store.dispatch('sysdict/getDict', 'plate_color').then(res => {
            console.log('==========');
            console.log(res);
        }).catch(() => {
        });
        // this.getList();
    },
    methods: {
        tableRowClassName({row, rowIndex}) {
            if (this.$refs['examDetail'] && this.$refs['examDetail'].outerVisible && row == this.detailData) {
                return 'selected-row';
            }
            return '';
        },
        moment,
        handleViews(i) {
            InquiryResult({process_id: this.tableData[i].process_id}).then(res => {
                this.detailData = this.tableData[i];
                if (res.res.InquiryResult) {
                    this.detailData.InquiryResult = res.res.InquiryResult[0];

                    if (this.detailData.InquiryResult.invalid_reason_list) {
                        this.detailData.InquiryResult.invalidReasons = this.detailData.InquiryResult.invalid_reason_list.split(',');
                        console.log('this.detailData.invalidReasons');
                        console.log(this.detailData.InquiryResult.invalidReasons);
                    }
                    this.detailData.InquiryResult.firstIllegalType = {};
                    if (this.detailData.InquiryResult.violative_action) {
                        this.detailData.InquiryResult.firstIllegalType.zdhp = this.detailData.InquiryResult.violative_action[1] == '0';
                        this.detailData.InquiryResult.firstIllegalType.jp = this.detailData.InquiryResult.violative_action[1] == '0';
                        this.detailData.InquiryResult.firstIllegalType.tp = this.detailData.InquiryResult.violative_action[2] == '0';
                        this.detailData.InquiryResult.firstIllegalType.yx = this.detailData.InquiryResult.violative_action[3] == '0';
                    }
                    this.index = i;
                    this.$refs['examDetail'].show();
                    this.$forceUpdate();
                }
            }).catch(err => {
                console.log(err);
                this.$message({
                    message: '查看详情失败',
                    type: 'error'
                });
            });
        },
        handleQuery() {
            this.getList();
        },
        resetQuery() {
            this.queryParams.Plate_no = '';
            this.queryParams.Vehicle_weight = '';
            this.queryParams.Vehicle_weight1 = '';
            this.queryParams.Over_rate = '';
            this.queryParams.Over_rate1 = '';
            this.queryParams.Axle_num = '';
            this.queryParams.Crossing_id = '';
            this.queryParams.Pass_time1 = '';
            this.queryParams.Pass_time2 = '';
            this.queryParams.CurrentPage = 1;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryParams.CurrentPage = val;
            this.getList();
        },
        getList() {
            this.isLoading = true;
            this.queryParams.Crossing_id = this.crossing_arr.join(',');
            if (!this.queryParams.Pass_time1) {
                this.queryParams.Pass_time1 = '';
            }
            if (!this.queryParams.Pass_time2) {
                this.queryParams.Pass_time2 = '';
            }
            InquiryInvalided(this.queryParams).then(res => {
                this.isLoading = false;
                console.log(res);
                this.tableData = res.res.InquiryInvalided;
                this.tableSize = this.tableData.length;
                if (this.tableData && this.tableData.length > 0) {
                    this.totalCount = this.tableData[0].totalCount;
                }

            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        closeCase(i) {
            // 定义接口所需字段并赋值
            let param = {
                // 获取role_id
                role_id: this.$store.state.user.role_id,
                // 获取车辆id
                violative_alarm_id: this.tableData[i].violative_alarm_id
            };
            this.$confirm('此操作将撤销车辆到初审, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 将接口所需数据传至接口
                Revocation(param).then(res => {
                    // || res.res.violative_alarm_id == this.tableData[i].violative_alarm_id
                    if (res.res.Revocation == '撤销成功') {
                        this.$message({
                            message: '撤销成功',
                            type: 'success'
                        });
                        this.getList();
                    } else {
                        this.$message({
                            message: res.res.Revocation,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                    console.log(err);
                });
            });
            // this.getList();
        }
    }
};
</script>

<style scoped>
    .table-header {
        background-color: #f8f8f8 !important;
    }
    /deep/
    .el-table td {
        padding: 5px 0 !important;
    }
    /deep/
    .el-button--text {
        padding: 7px 0;
    }
</style>

